<template>
<!-- vue3组件中的模板结构可以没有根标签div -->
  <h1>一个人的信息</h1>
  <h2>当前求和为：{{sum}}</h2>
  <button @click="sum++">点我加1</button>
  <hr>
  <h2>当前的信息为：{{msg}}</h2>
  <button @click="msg+='!'">修改信息</button>
</template>

<script>
import {reactive, ref ,watch} from 'vue'

export default {
  name: 'App',
//   vue2
//   watch :{
//     //   sum(newValue,oldValue){
//     //       console.log('sum的值变化了',newValue,oldValue);
//     //   }
//     sum:{
//         immediate:true,
//         deep:true,
//         handler(newValue,oldValue){
//           console.log('sum的值变化了',newValue,oldValue);
//       }
//     }
//   },

  setup() {
    // Data
      let sum = ref(0)
      let msg = ref('你好啊')
      let person = reactive({
        age:18,
        name:"管",
        job:{
          title:"java"
        }
      })
    // 监视
    // 情况一：监视ref所定义的一个响应式数据
    // watch(sum,(newValue,oldValue)=>{
    //     console.log(newValue,oldValue);
    // })
     // 情况二：监视ref所定义的多个响应式数据
      watch([sum,msg],(newValue,oldValue)=>{
        console.log(newValue,oldValue);
    })
    /* 情况三：监视reactive所定义的一个响应式数据的全部属性
        1.注意：此处无法正确获取oldValue
        2.注意：强制开启了深度监视（deep配置无效）
    */
        //  watch(person,(newValue,oldValue)=>{
        //    console.log("person的age变化了",newValue,oldValue);
        //  })
     // 情况四：监视reactive所定义的一个响应式数据的某个属性
      //  watch(()=>person.age),(newValue,oldValue)=>{
      //    console.log("person的age变化了",newValue,oldValue);
      //  })
     // 情况五：监视reactive所定义的一个响应式数据的某些属性
      //  watch([()=>person.age,()=>person.name)],(newValue,oldValue)=>{
      //    console.log("person的age变化了",newValue,oldValue);
      //  })
      // 情况六：特殊情况
      //  watch(()=>person.job,(newValue,oldValue)=>{
      //    console.log("person的age变化了",newValue,oldValue);
      //  },{deep:true})
      return {
        sum,
        msg,
        person
      }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
